<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 自定义组件，标题 -->
      <PageTitle :show-before="true">
        <template v-slot:before>
          <h2>{{ $t('route.businessList') }}</h2>
        </template>
        <template v-slot:after>
          <el-button class="filter-item" size="medium" style="margin-left: 10px;" type="primary" icon="el-icon-edit" :disabled="!checkPermission('businessList-add')" @click="addOrEidt('add',0)">{{ $t('button.add') }}</el-button>
        </template>
      </PageTitle>
      <!-- 搜索筛选 -->
      <el-row :gutter="20" style="margin-top:20px">
        <el-col :span="4">
          <el-input v-model="query.name" type="text" :placeholder="$t('table.businessName')" />
        </el-col>
        <el-col :span="3">
          <el-select v-model.number="query.cid" clearable :placeholder="$t('table.selectThe')+$t('table.c_name')">
            <el-option v-for="(item,index) in cateList" :key="index" :label="item.name" :value="item.id" />
          </el-select>
        </el-col>
        <el-col :span="3">
          <el-select v-model.number="query.status" :placeholder="$t('table.selectThe')+$t('table.state')">
            <el-option v-for="(item,index) in statusData" :key="index" :label="item.value" :value="item.id" />
          </el-select>
        </el-col>
        <el-col :span="3">
          <el-select v-model.number="query.is_open" clearable :placeholder="$t('table.selectThe')+$t('table.is_open')">
            <el-option v-for="(item,index) in Is_openData" :key="index" :label="item.value" :value="item.id" />
          </el-select>
        </el-col>
        <el-col :span="3">
          <el-button type="primary" icon="el-icon-search" @click="search">{{ $t('button.search') }}</el-button>
        </el-col>
      </el-row>
      <!-- 数据表 -->
      <el-table v-loading="downloadLoading" border :data="list" max-height="650px" style="margin-top: 20px;">
        <el-table-column label="ID" prop="id" sortable="custom" width="60" />
        <el-table-column :label="$t('table.c_name')" prop="c_name" />
        <el-table-column :label="$t('table.businessName')" prop="name" />
        <el-table-column :label="$t('table.logo')" prop="logo">
          <template slot-scope="{row}">
            <div class="table-img">
              <img :src="row.logo" width="100%">
            </div>
          </template>
        </el-table-column>
        <el-table-column :label="$t('table.linkman')" prop="linkman" />
        <el-table-column :label="$t('table.viewnum')" prop="viewnum" />
        <el-table-column :label="$t('table.state')" prop="status">
          <template slot-scope="{row}">
            <el-tag :type="row.status|statusFilter">
              {{ row.status|businessStatus }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column :label="$t('table.is_open')" prop="is_open">
          <template slot-scope="{row}">
            <el-tag :type="row.is_open|statusFilter">
              {{ row.is_open|businessOpen }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column :label="$t('table.creationTime')" prop="createtime" width="180">
          <template slot-scope="{row}">
            {{ row.createtime|timeStanp }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('table.endtime')" prop="endtime" width="180">
          <template slot-scope="{row}">
            {{ row.endtime|timeStanp1000 }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('table.actions')" align="center" width="320" class-name="small-padding fixed-width">
          <template slot-scope="{row}">
            <el-button icon="el-icon-edit" type="primary" size="mini" :disabled="!checkPermission('businessList-edit')" @click="addOrEidt('edit',row)">{{ $t('button.edit') }}</el-button>
            <el-button icon="el-icon-position" type="warning" size="mini" :disabled="!checkPermission('businessList-set')" @click="isOpen(row)">{{ $t('button.Business') }}</el-button>
            <el-button icon="el-icon-delete" size="mini" :disabled="!checkPermission('businessList-del')" @click="delData(row.id)">{{ $t('button.delete') }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row type="flex" align="middle" style="margin-top:20px">
        <el-pagination background layout="total,prev,pager,next" :total="count" :page-size="query.limit" :current-page="query.page" @current-change="changPage" />
      </el-row>
    </div>
    <!-- 添加 -->
    <el-dialog :title="dialogTitle" :visible="showDialog" top="40px" @opened="openDialog" @close="btnCanle">
      <div class="shopOrder-dialog">
        <el-form ref="ruleForm" :model="formData" :rules="rules" label-width="150px">
          <el-form-item :label="$t('table.c_name')" prop="cid">
            <el-select v-model="formData.cid" :placeholder="$t('table.selectThe')+' '+$t('table.c_name')">
              <el-option v-for="(item,index) in cateList" :key="index" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('table.businessName')" prop="name">
            <el-input v-model="formData.name" :placeholder="$t('table.enterThe')+' '+$t('table.businessName')" style="width:50%" />
          </el-form-item>
          <el-form-item :label="$t('table.feepercent')" prop="feepercent">
            <el-input v-model.number="formData.feepercent" :placeholder="$t('table.enterThe')+' '+$t('table.feepercent')" style="width:50%" />
          </el-form-item>
          <el-form-item :label="$t('table.linkman')" prop="linkman">
            <el-input v-model="formData.linkman" :placeholder="$t('table.enterThe')+' '+$t('table.linkman')" style="width:50%" />
          </el-form-item>
          <el-form-item :label="$t('table.linktel')" prop="linktel">
            <el-input v-model="formData.linktel" :placeholder="$t('table.enterThe')+' '+$t('table.linktel')" style="width:50%" />
          </el-form-item>
          <el-form-item :label="$t('table.password')" prop="bankname">
            <el-input v-model="formData.bankname" :placeholder="$t('table.enterThe')+' '+$t('table.password')" style="width:50%" />
          </el-form-item>
          <el-form-item :label="$t('table.kfurl')">
            <el-input v-model="formData.kfurl" :placeholder="$t('table.enterThe')+' '+$t('table.kfurl')" style="width:50%" />
          </el-form-item>
          <el-form-item :label="$t('table.logo')">
            <ImageUpload ref="staffPhoto" />
          </el-form-item>
          <el-form-item :label="$t('table.pics')">
            <ImageUpload ref="picsPhoto" />
          </el-form-item>
          <el-form-item :label="$t('table.desc')">
            <el-input v-model="formData.desc" :placeholder="$t('table.enterThe')+' '+$t('table.desc')" style="width:50%" />
          </el-form-item>
          <el-form-item :label="$t('table.businessContent')">
            <RichText ref="child" :values="formData.content" />
          </el-form-item>
          <el-form-item :label="$t('table.BusinessAddress')">
            <ChinaArea ref="Address" />
            <el-input v-model="formData.address" :placeholder="$t('table.enterThe')+' '+$t('table.address')" style="width:50%;margin-top: 10px;" />
          </el-form-item>
          <el-form-item :label="$t('table.endtime')">
            <el-date-picker v-model="formData.endtime" type="date" :placeholder="$t('table.selectThe')+' '+$t('table.endtime')" format="yyyy 年 MM 月 dd 日" value-format="timestamp" />
          </el-form-item>
          <el-form-item :label="$t('table.is_open')" prop="is_open">
            <el-select v-model.number="formData.is_open" :placeholder="$t('table.selectThe')+' '+$t('table.is_open')">
              <el-option v-for="(item,index) in Is_openData" :key="index" :label="item.value" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('table.state')" prop="status">
            <el-select v-model.number="formData.status" :placeholder="$t('table.selectThe')+' '+$t('table.state')">
              <template v-for="(item,index) in statusData">
                <el-option v-if="item.id!==-2" :key="index" :label="item.value" :value="item.id" />
              </template>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="btnCanle">{{ $t('button.cancel') }}</el-button>
        <el-button type="primary" @click="btnOk">{{ $t('button.confirm') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getBusiness, getBusinessCate, addBusiness, delBusiness, stopBusiness } from '@/api/user'
export default ({
  filters: {
    statusFilter(status) {
      const statusMap = {
        1: 'success',
        2: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: [],
      downloadLoading: false,
      cateList: [],
      statusData: [{
        id: 0,
        value: this.$t('filters.Audit')
      },
      {
        id: 1,
        value: this.$t('filters.Passed')
      },
      {
        id: 2,
        value: this.$t('filters.Rejected')
      },
      {
        id: -1,
        value: this.$t('filters.Expired')
      },
      {
        id: -2,
        value: this.$t('table.all')
      }],
      Is_openData: [{
        id: 1,
        value: this.$t('table.opening')
      },
      {
        id: 2,
        value: this.$t('table.openno')
      }],
      query: {
        aid: 1,
        cid: '',
        name: '',
        status: -2,
        is_open: undefined,
        page: 1,
        limit: 10
      },
      count: 0,
      dialogTitle: this.$t('button.add'),
      formData: {
        aid: 1,
        id: undefined,
        name: '',
        feepercent: undefined,
        cid: '',
        linkman: '',
        linktel: '',
        pics: '',
        logo: '',
        kfurl: '',
        content: '',
        desc: '',
        province: '',
        city: '',
        district: '',
        endtime: undefined,
        status: undefined,
        address: '',
        is_open: undefined,
        bankname: ''
      },
      rules: {
        name: [{ required: true, message: this.$t('table.name') + this.$t('prompt.noEmpty'), trigger: 'blur' }],
        cid: [{ required: true, message: this.$t('table.c_name') + this.$t('prompt.noEmpty'), trigger: 'blur' }],
        feepercent: [{ required: true, message: this.$t('table.feepercent') + this.$t('prompt.noEmpty'), trigger: 'blur' }],
        linkman: [{ required: true, message: this.$t('table.linkman') + this.$t('prompt.noEmpty'), trigger: 'blur' }],
        linktel: [{ required: true, message: this.$t('table.linktel') + this.$t('prompt.noEmpty'), trigger: 'blur' }],
        status: [{ required: true, message: this.$t('table.state') + this.$t('prompt.noEmpty'), trigger: 'blur' }]
      },
      showDialog: false
    }
  },
  created() {
    // 获取userid
    this.getBusinessCateList()
    this.getBusinessList()
  },
  methods: {
    // 获取商户分类列表
    async getBusinessCateList() {
      const { list } = await getBusinessCate(this.query)
      this.cateList = list
    },
    // 获取商户列表
    async getBusinessList() {
      this.downloadLoading = true
      if (this.query.is_open === '') {
        this.query.is_open = undefined
      }
      if (this.query.cid === '') {
        this.query.cid = undefined
      }
      const { count, list } = await getBusiness(this.query)
      this.list = list
      this.count = count
      this.downloadLoading = false
    },
    // 点击展开新增修改
    addOrEidt(type, row) {
      if (type === 'add') {
        this.dialogTitle = this.$t('button.add')
        this.formData.id = undefined
        this.formData.name = ''
        this.formData.pics = ''
        this.formData.cid = ''
        this.formData.logo = ''
        this.formData.status = undefined
        this.formData.kfurl = ''
        this.formData.linkman = ''
        this.formData.linktel = ''
        this.formData.desc = ''
        this.formData.endtime = undefined
        this.formData.feepercent = undefined
        this.formData.address = ''
        this.formData.is_open = undefined
        this.showDialog = true
        this.$nextTick(() => {
          this.$refs['ruleForm'].clearValidate()
        })
      } else if (type === 'edit') {
        this.dialogTitle = this.$t('button.edit')
        this.formData.id = row.id
        this.formData.cid = parseFloat(row.cid)
        this.formData.name = row.name
        this.formData.status = row.status
        this.formData.logo = row.logo
        this.formData.pics = row.pics
        this.formData.province = row.province
        this.formData.city = row.city
        this.formData.district = row.district
        this.formData.content = row.content
        this.formData.kfurl = row.kfurl
        this.formData.linkman = row.linkman
        this.formData.linktel = row.linktel
        this.formData.desc = row.desc
        this.formData.endtime = row.endtime
        this.formData.address = row.address
        this.formData.feepercent = row.feepercent
        this.formData.is_open = row.is_open
        this.showDialog = true
        this.$nextTick(() => {
          this.$refs['ruleForm'].clearValidate()
        })
      }
    },
    // 点击确定时
    async btnOk() {
      try {
        // 校验整个表单
        await this.$refs.ruleForm.validate()
        // 读取上传组件的数据
        const fileList = this.$refs.staffPhoto.fileList
        // 循环判断是否已经完成全部上传
        if (fileList.some(item => !item.upload)) {
          //  如果此时去找 upload为false的图片 找到了说明 有图片还没有上传完成
          this.$message.warning(this.$t('prompt.noImage'))
          return
        }
        this.formData = { ...this.formData, logo: fileList && fileList.length ? fileList[0].url : '' }
        // 读取上传组件的数据
        const fileList1 = this.$refs.picsPhoto.fileList
        // 循环判断是否已经完成全部上传
        if (fileList1.some(item => !item.upload)) {
          //  如果此时去找 upload为false的图片 找到了说明 有图片还没有上传完成
          this.$message.warning(this.$t('prompt.noImage'))
          return
        }
        this.formData = { ...this.formData, pics: fileList1 && fileList1.length ? fileList1[0].url : '' }
        // 获取富文本编辑内容
        const oldProcedure = this.$refs.child.getVal()
        this.formData.content = oldProcedure
        // 获取省市区
        const selectedOptions = this.$refs.Address.selectedOptions
        this.formData.province = selectedOptions[0]
        this.formData.city = selectedOptions[1]
        this.formData.district = selectedOptions[2]
        // 强制cid为字符串
        this.formData.cid = String(this.formData.cid)
        // 调用新增接口
        await addBusiness(this.formData)
        // 更新数据
        this.getBusinessList()
        this.btnCanle()
        this.$message.success(this.$t('prompt.success'))
      } catch (error) {
        this.$message.error(error)
      }
    },
    // 删除管理员
    async delData(e) {
      const data = {
        id: e
      }
      try {
        await this.$confirm(this.$t('prompt.deleteit'))
        await delBusiness(data)
        this.getBusinessList()
        this.$message.success(this.$t('prompt.deletesuccess'))
      } catch (error) {
        this.$message.error(error)
      }
    },
    // 修改营业状态
    async isOpen(row) {
      let is_open = 1
      if (row.is_open === 1) {
        is_open = 2
      }
      const data = {
        id: row.id,
        is_open: is_open
      }
      try {
        await this.$confirm(this.$t('prompt.edit'))
        await stopBusiness(data)
        this.getBusinessList()
        this.$message.success(this.$t('prompt.success'))
      } catch (error) {
        this.$message.error(error)
      }
    },
    // 给图片赋值
    openDialog() {
      if (this.formData.logo) {
        this.$refs.staffPhoto.fileList = [{ url: this.formData.logo, upload: true }]
      }
      if (this.formData.pics) {
        this.$refs.picsPhoto.fileList = [{ url: this.formData.pics, upload: true }]
      }
      if (this.formData.content) {
        this.$refs.child.content = this.formData.content
      }
      if (this.formData.district) {
        this.$refs.Address.selectedOptions = [this.formData.province, this.formData.city, this.formData.district]
      }
    },
    // 取消重置原来的数据
    btnCanle() {
      this.formData = {
        id: undefined,
        name: '',
        pic: '',
        status: undefined,
        sort: 0
      }
      this.$refs.staffPhoto.fileList = []
      this.$refs.picsPhoto.fileList = []
      this.$refs.Address.selectedOptions = ''
      this.$refs.child.content = ''
      this.$refs.ruleForm.clearValidate()// 重置校验结果
      this.showDialog = false
    },
    // 搜索
    search() {
      this.query.page = 1
      this.getBusinessList()
    },
    // 分页
    changPage(newPage) {
      this.query.page = newPage
      this.getBusinessList()
    }
  }
})
</script>
<style lang="scss">
.table-img{
  width: 90px;
}
.shopOrder-dialog{
  height: auto;
  max-height: 750px;
  overflow-y: auto;
  .editor{
    width: 500px;
  }
}
.shopOrder-dialog::-webkit-scrollbar{display:none}
</style>
